<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <swiper :options="swiperOptions" ref="indexSwiper">
        <swiper-slide v-for="(item, index) of swiperData" :key="index">
          <slider-inner :data="item"> </slider-inner>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import Swiper2,{Navigation,Pagination} from 'swiper';
import "swiper/swiper-bundle.css";
import SliderInner from "./SliderInner";
Swiper2.use([Navigation,Pagination])
export default {
  name: "IndexSwiper",
  props: {
    swiperData: Array,
  },
  components: {
    Swiper,
    SwiperSlide,
    SliderInner,
  },
  data() {
    return {
      swiperOptions: {
          pagination:{
              el: '.swiper-pagination',
              clickable:true
          },
          loop:true,
          loopedSlides:1,
          autoplay:true
      }
    }
  }
};
</script>

<style lang="scss" scoped >
 /deep/.swiper-pagination-bullet-active{
    background-color: #ccc;
  }
</style>